<template>
    <div class="login-wrap">
        <div class="login-title">
            后台管理系统
        </div>
        <div class="login-form">
            <el-form  :model="userForm" status-icon :rules="rules" ref="userForm">
                <el-form-item label="" prop="username">
                    <el-input type="text" v-model="userForm.username"  placeholder="请输入用户名或者邮箱" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="" prop="password">
                    <el-input type="password" v-model="userForm.password" placeholder="请输入密码" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :loading="isLogining" @click="handleClick('userForm')">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>

export default {
    data(){
        return{
            rules:{
              username:[{required:true,message:'请输入账户名',trigger:'blur'}],
              password:[{required:true,message:'请输入密码',trigger:'blur'}]
            },
            userForm:{
              username:'',
              password:''
            },
            successMsg:'登录成功!',
            errorMsg:'登录失败！',
            isLogining:false
        }
    },
    methods:{
        handleClick(formName){
            // this.$message({
            //     message: this.errorMsg,
            //     type: 'warning'
            // });

            // this.$message.error("出错啦");

          this.$refs[formName].validate((valid)=>{
            if(valid){
              this.isLogining = true;
              var _this=this;
              //定时器
              setTimeout(function(){
                _this.$router.push("/home");
                _this.$message.success(_this.successMsg);
                _this.isLogining = false;
              },3000);
            }else{
              return false;
            }
          });


        }
    }
}
</script>

<style scoped>
    .login-wrap{
        display: flex;
        flex-direction:column; /*容器内元素从上到下垂直排列 */
        height: 100vh;     /* 100vh这个样式单位是 相对于视口的高度。这个单位表示视口被均分为100单位的vh
                                所以这里将父级高度设置为100vh就是将整个屏幕占满了 */
        justify-content: center;
    }
    .login-title{
        text-align: center;
        color:#fff;
        font-size: 35px;
    }
    .login-form{
        width: 300px;
        height: 160px;
        padding: 40px;
        background-color: #fff;
        border-radius: 20px;
        align-self: center;
        margin-top:35px;
    }
    .el-button{
        width: 100%;
    }
</style>

